---
import '@astrojs/site-kit/tailwind.css';
import '@fontsource-variable/inter';
import '../styles/fonts.css';
import Footer from '../components/Footer.astro';
import Preloads from '../components/Preloads.astro';
import TrackVitals from '../components/TrackVitals.astro';
export interface Props {
  title?: string;
  description?: string;
  ogImg?: {
    src: string;
    alt: string;
  };
  wide?: boolean;
}
const {
  title = 'PaddlePaddle Badges',
  description = 'Badges to show off your PaddlePaddle pride',
  ogImg = {
    src: '/ogimg.jpg',
    alt: 'The text PaddlePaddle Badges” over a soft green-gray gradient.',
  },
} = Astro.props;
const ogImgURL = new URL(ogImg.src, Astro.site).href;
const canonical = new URL(Astro.url.pathname, Astro.site).href;

const navItems = [
  { text: 'Contributors', href: '/contributors/' },
  { text: 'Badges', href: '/badges/' },
];
---

<html lang="en" class="h-full">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonical} />
    <link rel="icon" href="/favicon.ico" sizes="32x32">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">

    <Preloads />

    <!-- OpenGraph Tags -->
    <meta property="og:title" content={title} />
    <meta property="og:type" content="article" />
    <meta property="og:url" content={canonical} />
    <meta property="og:locale" content="en" />
    <meta property="og:image" content={ogImgURL} />
    <meta property="og:image:alt" content={ogImg.alt} />
    <meta name="description" property="og:description" content={description} />
    <meta property="og:site_name" content="PaddlePaddle Badges" />

    <!-- Twitter Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="swithinbank" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogImgURL} />
    <meta name="twitter:image:alt" content={ogImg.alt} />

    <script>
      import { inject } from '@vercel/analytics';
      inject();
    </script>
  </head>

  <body class="min-h-full bg-neutral-700 text-neutral-200 flex flex-col noise-container">
    <div
      class="absolute inset-0 opacity-10 -z-20 pointer-events-none bg-[url('/_astro/noise.webp')]"
    >
    </div>
    <header
      class="flex flex-wrap xs:flex-nowrap justify-center xs:justify-between items-center px-4 sm:px-6 py-5 gap-4 shrink-0 bg-neutral-700 border-b border-neutral-600 font-mono"
    >
      <a href="/" class="flex items-center gap-2 text-white leading-none">
        <span class="sr-only">PaddlePaddle</span>
        <svg class="h-9"viewBox="0 0 63 36" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M33.5298 5.83784C35.1418 5.83784 36.4487 4.531 36.4487 2.91892C36.4487 1.30684 35.1418 0 33.5298 0C31.9176 0 30.6109 1.30684 30.6109 2.91892C30.6109 4.531 31.9176 5.83784 33.5298 5.83784ZM46.9568 7.97838H42.2866L29.6379 36H34.3082L46.9568 7.97838ZM62.1352 2.91892C62.1352 4.531 60.8283 5.83784 59.2163 5.83784C57.6041 5.83784 56.2974 4.531 56.2974 2.91892C56.2974 1.30684 57.6041 0 59.2163 0C60.8283 0 62.1352 1.30684 62.1352 2.91892ZM26.4271 11.4811L28.0662 7.9784L28.0812 7.97838C32.1649 7.97838 35.4758 11.2891 35.4758 15.373C35.4758 19.4569 32.1649 22.7676 28.0812 22.7676H16.7351L18.4919 18.8757H28.0812C30.0156 18.8757 31.5839 17.3075 31.5839 15.373C31.5839 13.4385 30.1244 12 28.1785 11.6757C27.3871 11.5438 26.4271 11.4811 26.4271 11.4811ZM53.7527 7.9784L52.1136 11.4811C52.1136 11.4811 53.0735 11.5438 53.865 11.6757C55.8109 12 57.2704 13.4385 57.2704 15.373C57.2704 17.3075 55.7021 18.8757 53.7677 18.8757H44.1784L42.4216 22.7676H53.7677C57.8514 22.7676 61.1623 19.4569 61.1623 15.373C61.1623 11.2891 57.8514 7.97838 53.7677 7.97838L53.7527 7.9784ZM16.6 7.97838H21.2704L8.62163 36H3.95136L9.92432 22.7676H0L1.75676 18.8757H11.6811L16.6 7.97838Z" fill="white"/>
        </svg>
        <span
          class="rounded z-0 px-1.5 py-1 shadow-lg uppercase relative before:block before:absolute before:inset-0 before:rounded before:bg-red-pink-gradient before:-z-10 after:block after:absolute after:inset-px after:rounded-[3px] after:bg-neutral-700/50 after:-z-10"
        >
          Badges
        </span>
      </a>
      <nav>
        <ul class="flex flex-wrap gap-x-4 gap-y-0.5 justify-end">
          {
            navItems.map(({ href, text }) => (
              <li>
                <a {href} class="text-sm sm:text-base link">
                  {text}
                </a>
              </li>
            ))
          }
        </ul>
      </nav>
    </header>
    <main class="px-4 py-12 md:py-24 relative">
      <div class:list={['mx-auto', Astro.props.wide ? 'max-w-[60rem]' : 'max-w-[50rem]']}>
        <slot />
      </div>
    </main>
    <div class="mt-auto">
      <Footer />
    </div>
    <style is:global>
      :root {
        color-scheme: dark;
      }
      h1, h2, h3, h4, h5, h6 {
        @apply break-words max-w-full;
      }
      .astro-code {
        @apply p-4 select-all text-left text-sm border border-neutral-500 rounded-lg;
      }
    </style>
    <TrackVitals />
  </body>
</html>
